import styled from 'styled-components'
import spriteCover from '@/assets/img/sprite_cover.png'
import playbarSprite from '@/assets/img/sprite_icon.png'

export const PlayItemWrapper = styled.div`
  display: flex;
  flex-direction: column;
  width: 140px;
  height: 204px;
  line-height: 1.4;
  .top {
    .top-area {
      position: relative;
      .top-img {
      }
      .mask {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url(${spriteCover}) no-repeat;
        background-position: 0 0;
        cursor: pointer;
        z-index: 90;
      }
      .play-info {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100;
        height: 27px;
        padding: 0 10px;

        display: flex;
        align-items: center;
        justify-content: space-between;

        background: url(${spriteCover}) no-repeat;
        background-position: 0 -537px;

        .play-count {
          color: #ccc;
          display: flex;
          align-items: center;
          flex: 1;

          .icon {
            width: 17px;
            height: 17px;
            margin-top: 3px;
            margin-right: 5px;
            background: url(${playbarSprite}) no-repeat;
            background-position: 0 -24px;
          }
          .count {
          }
        }
        .play-btn {
          width: 16px;
          height: 17px;
          background: url(${playbarSprite}) no-repeat;
          background-position: 0 0;
          cursor: pointer;

          &:hover {
            background-position: 0 -60px;
          }
        }
      }
    }
  }
  .title {
    padding: 10px 0;
    color: #000;
    font-size: 14px;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    cursor: pointer;

    &:hover {
      text-decoration: underline;
    }
  }
`
